<template>
  <div style="margin-top: 40px">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="margin-right: 80px"
             label-width="150px" class="demo-ruleForm">
      <el-form-item label="广告名称：" prop="title">
        <el-input v-model="ruleForm.title" placeholder="请输入广告名称" size="large" style="width: 450px"></el-input>
      </el-form-item>
      <el-form-item label="有效日期：" required prop="dateRange">
        <el-col :span="11">
          <div class="block">
            <el-date-picker
                size="large"
                v-model="ruleForm.dateRange"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 430px"
                align="right">
            </el-date-picker>
          </div>
        </el-col>
      </el-form-item>
      <el-form-item label="详情描述：" prop="description">
        <el-input v-model="ruleForm.description" type="textarea" size="large" style="width: 450px"
                  placeholder="请输入广告详情描述"></el-input>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button type="primary" size="medium" @click="handleNext('ruleForm')">下一步，选择推广方式</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default{
  name: "couponMonitor",
  data() {
    return{
      ruleForm: {
        title:'',
        dateRange:'',
        description:'',
      },
      rules: {
        title: [
          { required: true, message: '请输入广告名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入广告详情描述', trigger: 'blur' }
        ],
        dateRange: [
          { required: true, message: '请选择有效日期', trigger: 'blur'},
        ]
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  watch: {

  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.ruleForm.taskSequence.indexOf(item)
      if (index !== -1) {
        this.ruleForm.taskSequence.splice(index, 1)
      }
    },
    addDomain() {
      this.ruleForm.taskSequence.push({
        value: '',
        key: Date.now()
      });
    },
    handleNext(formName){
      console.log("我調用了handleNext",this.ruleForm);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('getTaskDetail',this.ruleForm);
          this.$emit('nextStep');
        }
        else {
          this.$message({
            message: '添加失败',
            type: 'error',
            duration:1000
          });
          return false;
        }
      });
    },
  }

}
</script>
<style scoped>

</style>